
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title>三峡大学计算机与信息学院</title>
        <style>
			*{margin:0px; padding:0px;}
			
           .top{width:100%;height:120px;background:rgb(200, 214, 210);border:solid 0px red;}
		   .topContainer{width:1000px;height:120px;border:solid 0px yellow;margin:auto; background-color:#147800}
		   .topContainer #logo{float: left;width:583px;height: 100%;border: solid 0px red;}
		   .topContainer #banner{float: right;width:415px;height: 100%;border: solid 0px #1E7492; overflow: hidden;}
			.topContainer #logo img{margin-top:0px;}
			
           .menu_m{width:100%;height:40px;line-height:40px;background:#11BB51;clear: both;}
		   
           .menu{width:1000px;height:40px;margin:auto;border:solid 0px blue;background:seagreen;}
		   
           .menu ul{list-style:none;}
           .menu ul li{width:16%;float:left;background:seagreen;}
           .menu ul li a{display:block;color:#fff;text-align: center;text-decoration: none;}
		   
           .menu ul li a:hover{background: DarkGreen;}
		   
		   
           .brw{border-right:2px #fff solid;}
           .activea{background: DarkGreen;}
		   
		   
           .main_content{width:100%;min-height:400px;;border:solid 0px red;}
           .main_con{width:1000px;min-height:400px;margin:auto;}
		   
           .main_con h3,p{padding:10px 10px;}
		   
		   .main_con ul{list-style:none;margin:0;padding:0;}
		   .main_con ul li{margin:0;padding:5px;}
		   .main_con ul li a{color:#333; line-height: 30px; text-decoration:none;border: solid 0px red;width: 80%;white-space: nowrap; overflow: hidden; display: block;float: left;text-overflow: ellipsis;}
   		   .main_con ul li a:hover{color:#F60; text-decoration:underline;}
		   .main_con .date{float:right;line-height: 30px; color:#999}
		   
           p{text-indent: 2em;}
		   
           .foot{width:100%;height:80px;background:seagreen;;border:solid 0px red;}
		   
           .foot_content{width:1000px;height:80px;margin:auto; border:solid 0px blue;}
           .foot_link{width:660px;height:35px;margin:auto;line-height:35px;}
           .foot_link ul{list-style:none}
           .foot_link ul li{width:80px;float:left;}
           .foot_link ul li a{display:block;color:#fff;text-align:center;text-decoration: none;}
           .foot_copyright{width:600px;height:35px;margin:auto;text-align:center;line-height:35px;}
           .foot_copyright span{color:#fff;}
		   
		   
		   .ad1 {
		       border: solid 0px red;
		       width: 120px;
		       height: 120px;
		       position: fixed;
		       top: 100px;
		       right: 30px;
		   }
		   
		   .ad1 img {
		       width: 100%;
		       height: 100%;
		       object-fit: cover;
		   }

           .areaTile{
               display: block;
               width: 100%;
               line-height: 35px;
               padding-left: 5px;
               font-weight: bold;
           }
            .areaTile span{
                font-weight: normal;
                padding-left: 10px;
                color: #1E7492;
                font-size: 12px;
            }

            /* form */
            .login-container {
                width: 99%;
                height: 300px;
                padding: 10px;
            }

            label {
                display: block;
                margin-bottom: 2px;
            }

            input[type="text"], input[type="password"] {
                width: 85%;
                padding: 10px;
                margin-bottom: 5px;
                border-radius: 5px;
                border: 1px solid #ccc;
            }

            input[type="submit"] {
                padding: 10px 20px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }

            input[type="submit"]:hover {
                background-color: #45a049;
            }

            h3 {
                text-align: center;
            }
            /* /form */

            .linkImg{border: solid 1px red; width: 100%; height: 100px;}
            .linkImg img{width:250px;margin-top: 2px;}
        </style>

        <script>
            function checkForm(formDom){
                let username = formDom.username.value;
                console.log("username",username);
                // 正则表达式：只包含字母、数字、下划线和中划线，长度3到15
                var regex = /^[a-zA-Z0-9_-]{3,15}$/;
                // 使用test方法检查用户名是否符合正则表达式
                if (!regex.test(username)){
                   alert("用户名只能包含字母、数字、下划线和中划线，长度3到15");
                   return false;
                }
                alert("校验通过");
                return true;
            }

        </script>
	</head>
	<body>
    	
    <div class="ad1">
      <img src="./img/Diana.jpg" alt="广告图片"></div>
    <div class="top">
      <div class="topContainer">
        <div id="logo">
          <img src="./img/logo.jpg"></div>
        <div id="banner">
          <img src="./img/banner1.jpg" /></div>
      </div>
        
        <div class="menu_m"  >
          <div class="menu" style="position:relative">
            <ul>
                    <li class="brw"><a href="index.html" class="activea">首页</a></li>
                    <li class="brw"><a href="index2.html">学院介绍</a></li>
                    <li class="brw"><a href="#">大学相册</a></li>
                    <li class="brw"><a href="#">学生工作</a></li>
                    <li class="brw"><a href="#">教师介绍</a></li>
                    <li><a href="#">教研动态</a></li>
                 </ul>
            </div>
        </div>
        
        
    <div class="main_content">
            <div class="main_con">
                <div style="border: solid 1px red; width: 100%; height: 300px;">
					<div style="float: left;width: 380px; height: 100%;border: solid 1px blue;">1</div>

					<div style="float: left;width: 310px; height: 100%;border: solid 1px blue;">
                        <ul>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                        </ul>
                    </div>

					<div style="float: right;width: 300px; height: 100%;border: solid 1px blue;background-color: #white;">
                        <div class="login-container">
                            <h3>教务系统登录</h3>
                            <form name="educationSystem" action="/login" method="post" onsubmit="return checkForm(this)">
                                <label for="username">用户名:</label>
                                <input type="text" id="username" name="username" required>
                                <label for="pwd">密码:</label>
                                <input type="password" id="pwd" name="pwd" required>
                                <input type="submit" value="登录">
                            </form>
                            <p>还没有账号？</p><a target = "_blank" href = "./register.html">注册</a>
							
						 </div>
                    </div>
				</div>
				
				<div style="border: solid 1px red; width: 100%; height: 250px;">
					<div style="float: left;width: 400px; height: 100%;border: solid 1px blue;overflow: hidden;">
                        <div class="areaTile">通知公告<span>ANNOUNCEMENT</span></div>
                        <ul>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                        </ul>
                    </div>

					<div style="float: left;width: 295px; height: 100%;border: solid 1px blue;">
                        <div class="areaTile">学术动态<span>ACADEMIC</span></div>
                        <ul>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                        </ul>
                    </div>

					<div style="float: right;width: 295px; height: 100%;border: solid 1px blue;">
                        <div class="areaTile">就业信息<span>EMPLOYMENT</span></div>
                        <ul>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                            <li><span class="title"><a href="#">上好开学第—计算机与信息学院上好开学第—计算机与信息学院</a></span><span class="date">03-16</span></li>
                        </ul>
                    </div>
				</div>
				
				<div class="linkImg">
					<div style="float: left;width: 248px; height: 100%;border: solid 1px blue;">
                        <img src="images/l1.png">
                    </div>
					<div style="float: left;width: 248px; height: 100%;border: solid 1px blue;">
                        <img src="images/l2.png">
                    </div>
					<div style="float: left;width: 248px; height: 100%;border: solid 1px blue;">
                        <img src="images/l3.png">
                    </div>
					<div style="float: right;width: 248px; height: 100%;border: solid 1px blue;">
                        <img src="images/l4.png">
                    </div>
				</div>
            </div>
     </div>
        
        
        
    <div class="foot">
           <div class="foot_content">
              <div class="foot_link">
                 <ul>
                     <li><a href="#">关于我们</a></li>
                     <li><a href="#">发布招聘</a></li>
                     <li><a href="#">客服中心</a></li>
                     <li><a href="#">在线留言</a></li>
                     <li><a href="#">会员登录</a></li>
                     <li><a href="#">网站管理</a></li>
                     <li><a href="#">联系我们</a></li>
                 </ul>
              </div>
              
              <div class="foot_copyright">
                  <span>Copyright ©三峡大学计算机与信息学院</span>
              </div>
              
           </div>
        </div>
	</body>
</html>